<template>
  <el-image v-bind="props">
    <template #error>
      <div class="el-image__error">
        <solar-gallery-wide-bold-duotone width="min(50%,100px)" height="min(50%,100px)"></solar-gallery-wide-bold-duotone>
      </div>
    </template>
  </el-image>
</template>

<script lang="ts" setup>
  import { imageProps } from 'element-plus';
  import SolarGalleryWideBoldDuotone from '~icons/solar/gallery-wide-bold-duotone';
  defineOptions({
    name: 'base-image',
  });
  const props = defineProps({
    ...imageProps,
  });
</script>

<style lang="scss" scoped>
  .el-image__error {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
  }
</style>
